<template>
    <div>
        <el-tag closable type="primary" effect="dark"
            style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
            <span
                style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
            <span style="padding-left: 5px;">咨询师等级管理</span>
        </el-tag>
    </div>
    <div class="about">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="根据">
                <el-input v-model="formInline.name" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="系统模块">
                <el-select v-model="formInline.state" placeholder="Activity zone" style="width: 190px;" clearable>
                    <el-option label="正常" value="nomal" />
                    <el-option label="停用" value="stop" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <div class="mb20">
            <el-button @click="onAdd" type="primary" icon="Plus" plain>新增</el-button>
            <el-button @click="onDels" type="danger" icon="Delete" plain>删除</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column fixed prop="id" label="编号" width="150" />
            <el-table-column prop="name" label="咨询师等级" width="120" />
            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
                    <el-button link type="primary" @click="onDel(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 添加，编辑弹框 -->
    <el-dialog v-model="showPop" :title="isEdit ? '编辑' : '添加'">
        <LogAddCom v-if="showPop" @onCancel="onCancel" :dicid="dicid" :isEdit="isEdit" />
    </el-dialog>
    <el-pagination
     v-model:current-page="queryInfo.pageNum"
     v-model:page-size="queryInfo.pageSize"
     :page-sizes="[1, 5, 10, 20]"
     layout="total, sizes, prev, pager, next, jumper" 
     :total="total"
     @size-change="handleSizeChange" 
     @current-change="handleCurrentChange" />
</template>
<script setup>import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 引入 http.js 中的请求方法
import { get, del } from '@/http/http';

// 定义一个方法当页面加载后立马执行的代码
onMounted(() => {
    // console.log('onMounted');
    getList();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    levelName:'',
    id:''
    // name:'',
    // author:''
})

const total = ref(0)

// 定义一个方法，来动态的调用后端接口，获取文章列表
const getList = () => {
    // 使用 http.js 中的 get 方法调用后端接口获取数据
    get('/wt/consultantlevel/getAll', queryInfo.value)
        .then(resp => {
            let result = resp;
            if (result.code == 1) {
                tableData.value = result.data.list;
                total.value = result.data.total;
                console.log(tableData.value);
            } else {
                console.log('获取文章列表失败');
            }
        })
        .catch(error => {
            console.log('请求出错:', error);
        });
}

const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
}
const formInline = reactive({
    name: '',
    state: '',
    date: '',
})

// 删除
const onDel = () => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 使用 http.js 中的 del 方法实现删除操作
            del('/wt/consultantlevel/delete')
                .then(() => {
                    ElMessage({
                        message: '删除成功！',
                        type: 'success',
                    });
                    getList(); // 删除成功后重新获取列表
                })
                .catch(error => {
                    console.log('删除失败:', error);
                    ElMessage({
                        message: '删除失败，请稍后重试！',
                        type: 'error',
                    });
                });
        })
        .catch(() => { });
}

// 批量删除
const onDels = () => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 使用 http.js 中的 del 方法实现删除操作
            post('/wt/consultantlevel/deletelevelByIds')
                .then(() => {
                    ElMessage({
                        message: '删除成功！',
                        type: 'success',
                    });
                    getList(); // 删除成功后重新获取列表
                })
                .catch(error => {
                    console.log('删除失败:', error);
                    ElMessage({
                        message: '删除失败，请稍后重试！',
                        type: 'error',
                    });
                });
        })
        .catch(() => { });
}
// 弹框
const showPop = ref(false);
// 默认添加
const isEdit = ref(false);
const dicid = ref(0);
// 添加
const onAdd = row => {
    console.log(row);
    // 展示弹框
    showPop.value = true;
    isEdit.value = false;
}
// 编辑
const onEdit = row => {
    // console.log('row',row,row.id);
    // 展示弹框
    showPop.value = true;
    isEdit.value = true;
    // 更新id
    dicid.value = row.id;
}
// 弹框关闭
const onCancel = () => {
    // 展示弹框
    showPop.value = false;
}


const onSubmit = () => {
    console.log('submit!')
}
const tableData = ref([])
</script>
<style scoped></style>